/**
 * @Creator: eyes
 * @Date: 2020/3/17
 * 用户特征模块, 「更多筛选条件」, 包含省份/运营商等六个可选项
 */

import React, {useContext} from 'react';
import {StoreContext} from '../../data';
import {USER_FEATURE_ACTION_TYPES} from '../../utils';
import Option from './option';

export default ({getFieldDecorator}) => {
    const {
        state: {
            selectedProvince,
            provinceList,
            selectedCarrier,
            carrierList,
            selectedNetType,
            netTypeList,
            selectedOs,
            osList,
            selectedOsVersion,
            osVersionList,
            selectedBrandVersion,
            brandVersionList,
        },
        dispatch,
    } = useContext(StoreContext);

    const onChangeAdapter = key => value => {
        dispatch({
            type: USER_FEATURE_ACTION_TYPES.REGULAR_UPDATE,
            payload: {
                [key]: value,
            },
        });
    };

    // 所有可选的表单项
    const Options = [
        {
            label: '省份',
            field: 'province',
            list: provinceList,
            onChange: onChangeAdapter('selectedProvince'),
        }, {
            label: '运营商',
            field: 'carrier',
            list: carrierList,
            onChange: onChangeAdapter('selectedCarrier'),
        }, {
            label: '网络情况',
            field: 'net_type',
            list: netTypeList,
            onChange: onChangeAdapter('selectedNetType'),
        }, {
            label: '操作系统',
            field: 'os',
            list: osList,
            onChange: onChangeAdapter('selectedOs'),
        }, {
            label: '系统版本',
            field: 'os_version',
            list: osVersionList,
            onChange: onChangeAdapter('selectedOsVersion'),
        }, {
            label: '用户机型',
            field: 'brand_version',
            list: brandVersionList,
            onChange: onChangeAdapter('selectedBrandVersion'),
        },
    ];

    return (
        Options.map(({label, field, list, onChange}) => (
            <Option
                key={field}
                label={label}
                field={field}
                getFieldDecorator={getFieldDecorator}
                onChange={onChange}
            />
        ))
    );
};
